<template>
  <h2>菜单列表</h2>
  <ul>
    <li>宫保鸡丁 价格 {{ price1 }}<button @click="add1">点餐</button></li>
    <li>宫保猪丁 价格 {{ price2 }}<button @click="add2">点餐</button></li>
    <li>宫保牛丁 价格 {{ price3 }}<button @click="add3">点餐</button></li>
  </ul>
  <h2>已点菜单</h2>
  <ul>
    <li v-show="show1">宫保鸡丁 价格 {{ price1 }}<button @click="dowm1">-</button> 数量：{{ num1 }} <button @click="up1">+</button></li>
    <li v-show="show2">宫保猪丁 价格 {{ price2 }}<button @click="dowm2">-</button> 数量：{{ num2 }} <button @click="up2">+</button></li>
    <li v-show="show3">宫保牛丁 价格 {{ price3 }}<button @click="dowm3">-</button> 数量：{{ num3 }} <button @click="up3">+</button></li>
  </ul>
  <h2>你一共点了{{ totalnum }}道菜，消费{{ totalprice }}元</h2>
</template>

<script setup>
import { ref, computed, reactive, watch, watchEffect } from 'vue'
const price1 = 18.88
const price2 = 28.88
const price3 = 38.88
const num1 = ref(0);
const num2 = ref(0);
const num3 = ref(0);
const show1 = ref(false)
const show2 = ref(false)
const show3 = ref(false)

function add(show,num){  
  if(show.value === false){
    show.value=true
  }
  if(show.value === true){
    num.value++
  }
  }
  function up(num){
    num.value++ 
  }
  function  dowm(num,show){ 
  num.value-- 
  if(num.value === 0){
    show.value=false
  }
  }
const add1 = ()=>{add(show1,num1)}
const add2 = ()=>{add(show2,num2)}
const add3 = ()=>{add(show3,num3)}
const up1 = ()=>{up(num1)}
const up2 = ()=>{up(num2)}
const up3 = ()=>{up(num3)}
const dowm1 = ()=>{dowm(num1,show1)}
const dowm2 = ()=>{dowm(num2,show2)}
const dowm3 = ()=>{dowm(num3,show3)}
const totalnum = computed(()=>{
  return num1.value+num2.value+num3.value
})
const totalprice = computed(()=>{
  return (price1*num1.value+price2*num2.value+price3*num3.value).toFixed(2)
})






</script>

<style lang="scss" scoped></style>